<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h3>商品价格列表</h3>
    <input type="checkbox" name="item" value="1500" /> 山地自行车1500<br />
    <input type="checkbox" name="item" value="200" /> 时尚女装200<br />
    <input type="checkbox" name="item" value="3000" /> 笔记本电脑3000元<br />
    <input type="checkbox" name="item" value="800" /> 情侣手表800<br />
    <input type="checkbox" name="item" value="2000" /> 桑塔纳2000<br />
    <hr />
    <input type="checkbox" id="all" /><label for="all"
      >全选/全不选 &nbsp;</label
    >
    <input type="button" id="reverse" value=" 反 选 " />&nbsp;
    <input type="button" value=" 结 账 " />&nbsp;
    <span id="result"></span>

    <script src="jquery.min.js"></script>
    <script>
      $(function () {
        let all = $("#all");
        let items = $("input[name=item]");
        let reverse = $("#reverse");

        all.click(() => {
          items.prop("checked", all.prop("checked"));
        });

        reverse.click(() => {
          items.each(function () {
            $(this).prop("checked", !$(this).prop("checked"));
          });
          checkStatus();
        });

        items.click((e) => {
          //   console.log(e.target);
          checkStatus(e.target);
        });

        function checkStatus(t) {
          if (!$(t).prop("checked")) {
            // 取消勾选
            all.prop("checked", false);
          }
          // 勾选
          let flag = true;
          items.each(function () {
            if (!$(this).prop("checked")) {
              flag = false;
            }
          });
          all.prop("checked", flag);
        }
      });
    </script>
  </body>
</html>
